import React, { useRef ,useState} from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {Row, Col, Modal ,Button, Tag, Space, Menu, message  } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormTextArea,
  ProFormSelect,
  ProFormUploadButton,
  ProFormDatePicker,
  ProFormGroup
} from '@ant-design/pro-form';
import styles from './style.less'
type LayoutType = Parameters<typeof ProForm>[0]['layout'];
import { GridContent } from '@ant-design/pro-layout';

import Mock from 'mockjs';
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
type GithubIssueItem = {
 
  id: number;
  describe: string;//缺陷描述
  flawState: number;//缺陷状态
  grade: number;//	缺陷等级
  suggestions: string;//处理建议 
  entryName: string;//项目名称
  location: string;//区域位置 
  discoveTime: Date;//发现时间
  responsiblePerson: string;//	负责人
  executor: string;//	执行人
  term: Date;//	消缺期限
};

const tableListDataSource: GithubIssueItem[] = [];
const valueEnum = {
  0: '全部',
  1:'运行中',
};

for (let i = 0; i < 10; i += 1) {
  tableListDataSource.push({
    id: i,
    describe:'缺陷描述'+i,
    flawState: 1,
    grade:1,
    location: '区域位置'+i,
    suggestions:'处理建议'+i,
    entryName: '项目名称'+i,
    discoveTime: new Date(),
    responsiblePerson: '负责人'+i,
    executor: '执行人'+i,
    term: new Date(),
  });
}


export default () => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false);
  const [cities, setCities] = React.useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = React.useState(cityData[provinceData[0]][0]);

  const handleProvinceChange = value => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };

  const onSecondCityChange = value => {
    setSecondCity(value);
  };
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '缺陷描述',
      dataIndex: 'describe',
      ellipsis: true,
    },
    {
     title: '缺陷状态',
     dataIndex: 'flawState',
     initialValue: ['0'],
     width: 100,
     valueType: 'select',
     valueEnum,
   },
    {
  
      key: 'state',
     title: '缺陷等级',
     dataIndex: 'grade',
     initialValue: ['0'],
     width: 100,
     valueType: 'select',
     valueEnum,
   },
   {
    title: '处理建议',
    dataIndex: 'suggestions',
    ellipsis: true,
  },
   {
    title: '项目名称',
    dataIndex: 'entryName',
    ellipsis: true,
  },
    {
      title: '区域位置',
      dataIndex: 'location',
      ellipsis: true,
    },
    
    //  {
    //   title: '发现时间',
    //   valueType: 'date',
    //   dataIndex: 'discoveTime',
    //   ellipsis: true,
    // },
     {
      title: '负责人',
      dataIndex: 'responsiblePerson',
      ellipsis: true,
    },
    {
      title: '执行人',
      dataIndex: 'executor',
      ellipsis: true,
    },
    //  {
    //   title: '消缺期限',
    //   dataIndex: 'term',
    //   valueType: 'date',
    //   ellipsis: true,
    // },
    {
      title: '详情',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a    onClick={() => {
          setModalVisit(true);
        }}>
          查看
        </a>,
       
      ],
    },
  ];
    
    return (
      <GridContent>
      <React.Fragment>
      <ProTable<GithubIssueItem>
        columns={columns}
        actionRef={actionRef}
      dataSource={tableListDataSource}
      
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
       
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
        headerTitle=""
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary">
            导出
          </Button>,
         
        ]}
      />
      <div   style={{ backgroundColor:"#333"}} > 
    <ModalForm
        title="新建计划 "
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
   
        bodyStyle={{ backgroundColor:"#333"}}
        visible={modalVisit}
        style={{ backgroundColor:"#333"}} 
        onFinish={async () => {
          message.success('提交成功');
          return true;
        }}
        onVisibleChange={setModalVisit}
      >
        <ProFormGroup>
        <ProFormSelect
          name="select"
          label="支路名称"
          width="md"
          valueEnum={{
            china: 'China',
            usa: 'U.S.A',
          }}
          placeholder="Please select a country"
          rules={[{ required: true, message: '不能为空' }]}
        />
        <ProFormSelect
          name="select2"
          label=""
          width="md"
          showSearch
          request={async ({ keyWords }) => {
            await waitTime(1000);
            return Mock.mock({
              'data|1-10': [
                {
                  value: '@id',
                  label: '@name',
                },
              ],
            }).data.concat({
              value: keyWords,
              label: '目标_target',
            });
          }}
          placeholder="Please select a country"
          rules={[{ required: true, message: '不能为空' }]}
        />
      </ProFormGroup>
         <ProFormSelect
          name="select"
          label="执行人"
          valueEnum={{
            open: '未解决',
            closed: '已解决',
          }}
          mode="multiple"
          placeholder="请选择"
          rules={[{ required: true, message: '请选择' }]}
        />
        <ProFormSelect
          name="select"
          label="缺陷等级"
          valueEnum={{
            open: '未解决',
            closed: '已解决',
          }}
          placeholder="请选择"
          rules={[{ required: true, message: '请选择' }]}
        />
       <ProFormTextArea
        name="text"
        label="缺陷描述"
        placeholder=""
      />
      <ProFormTextArea
        name="text"
        label="处理建议"
        placeholder=""
      />
       <ProFormUploadButton
        name="upload"
        label="缺陷图片"
        max={2}
        fieldProps={{
          name: 'file',
          listType: 'picture-card',
        }}
        action="/upload.do"
        extra=""
      />
      <ProFormDatePicker width="md" name="date" label="消缺期限"   rules={[{ required: true, message: '请选择' }]}/>
    
     </ModalForm>
       </div>
        </React.Fragment>
      </GridContent>
    );
  };